<template>
    <div class="showImg" v-if="isShow">
      <div class="model" @click="close">
        <img :src="img" alt="" id="img" @load="loadFun" mode="widthFix" @click.stop="unClose">
      </div>

    </div>
</template>

<script>
    export default {
        name: "showImgs",
        props:['img'],
        data(){
            return {
                isShow:false
            }
        },
        onReady(){

        },
        methods:{
            unClose(){
              return false;
            },
            close(){
              this.isShow=false;
            },
            init(){
                this.isShow=true;


            }
        }
    }
</script>

<style scoped>
  .showImg{
    width: 100%;
    height: 100%;
  }
  #img{
    width: 100%;


  }
   .model{
     position: fixed;
     top:0;
     left:0;
     right: 0;
     bottom: 0;
     background:rgba(0,0,0,.5);
     z-index: 100;
     display: flex;
     justify-content: center;
     align-items: center;
   }
</style>
